<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :sm="10" :xs="24">
        <role ref="role" @roleClick="roleClick"></role>
      </el-col>
      <el-col :sm="6" :xs="24">
        <menus ref="menu" @menuClick="menuClick"></menus>
      </el-col>
      <el-col :sm="8" :xs="24">
        <permission ref="buttonPermission" type="2"></permission>
        <permission ref="routePermission" type="1"></permission>
      </el-col>
    </el-row>
  </div>

</template>

<script>
import Role from './components/Role'
import Menus from './components/Menu'
import Permission from './components/Permission'

export default {
  name: "index",
  components: {Permission, Role, Menus},
  data() {
    return {
      role: undefined,
      menu: undefined
    }
  },
  methods: {
    roleClick(role) {
      this.role = role
      this.$refs.menu.roleClick(role)
      this.$refs.routePermission.menuClick(this.menu, this.role)
      this.$refs.buttonPermission.menuClick(this.menu, this.role)
    },
    menuClick(menu) {
      if (!this.role) {
        this.$message.warning('请选择角色')
        return
      }
      this.menu = menu
      this.$refs.routePermission.menuClick(menu, this.role)
      this.$refs.buttonPermission.menuClick(menu, this.role)
    }
  }
}
</script>

<style scoped>

</style>
